<template>
  <div>
    <div class="card" style="background-color: skyblue;">
      <el-page-header :icon="Back" @click="router.back()">
        <template #content>
          <div class="span-align">
            <el-avatar :size="45" :src="data.user.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'"/>
            <span class="text-large" style="margin: 8px 15px 8px 8px;">{{ data.user.name }}</span>
            <el-button type="primary" plain size="small" :icon="Plus">关注</el-button>
          </div>
        </template>
      </el-page-header>
    </div>
    <div class="card" style="background-color: #eff9fe">
      <el-tabs v-model="data.activeName">
        <el-tab-pane label="Ta推荐的电影" name="first">
          <el-row style="padding: 10px;">
            <el-col :span="4.8" v-for="item in data.filmRecommendList" :key="item.id" class="layout-col" v-if="data.filmRecommendList.length > 0">
              <div class="layout-content">
                <img style="width: 300px; height: 450px; cursor: pointer" :src="item.cover" alt="" @click="goFilmDetail(item.id)" />
                <h3 style="text-align: center;">{{ item.name }}</h3>
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="Ta推荐的电视剧" name="second">
          <el-row style="padding: 10px;">
            <el-col :span="4.8" v-for="item in data.seriesRecommendList" :key="item.id" class="layout-col" v-if="data.seriesRecommendList.length > 0">
              <div class="layout-content">
                <img style="width: 300px; height: 450px; cursor: pointer;" :src="item.cover" alt="" @click="goSeriesDetail(item.id)">
                <h3 style="text-align: center;">{{ item.name }}</h3>
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="Ta评论的电影" name="third">
          <el-row style="padding: 10px;">
            <el-col :span="4.8" v-for="item in data.filmCommentList" :key="item.id" class="layout-col" v-if="data.filmCommentList.length > 0">
              <div class="layout-content">
                <img style="width: 300px; height: 450px; cursor: pointer;" :src="item.cover" alt="" @click="goSeriesDetail(item.id)">
                <h3 style="text-align: center;">{{ item.name }}</h3>
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="Ta评论的电视剧" name="fourth">
          <el-row style="padding: 10px;">
            <el-col :span="4.8" v-for="item in data.seriesCommentList" :key="item.id" class="layout-col" v-if="data.seriesCommentList.length > 0">
              <div class="layout-content">
                <img style="width: 300px; height: 450px; cursor: pointer;" :src="item.cover" alt="" @click="goSeriesDetail(item.id)">
                <h3 style="text-align: center;">{{ item.name }}</h3>
              </div>
            </el-col>
            <!--让el-empty居中-->
            <div v-else>
              <el-empty description="Ta还没有为电视剧评论喔" style="text-align: center;" :image-size="300" />
            </div>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import router from "@/router";
import request from "@/utils/request";
import { Back, Plus} from "@element-plus/icons-vue";

const data = reactive({
  id: router.currentRoute.value.query.id,
  filmRecommendList: {},
  seriesRecommendList: {},
  filmCommentList: {},
  seriesCommentList: {},
  user: {},
  activeName: 'first',
})

// 查询用户信息
const loadUserInfo = () => {
  request.get('/user/selectUser/' + data.id).then(res => {
    data.user = res.data
  })
}
loadUserInfo()

// 查询推荐电影列表
const loadFilmRecommendList = () => {
  request.get('/film/selectByUser/' + data.id).then(res => {
    data.filmRecommendList = res.data
  })
}
loadFilmRecommendList()

// 查询推荐电视剧列表
const loadSeriesRecommendList = () => {
  request.get('/series/selectByUser/' + data.id).then(res => {
    data.seriesRecommendList = res.data
  })
}
loadSeriesRecommendList()

// 查询评论电影列表
const loadFilmCommentList = () => {
  request.get('/film/selectByComment/' + data.id).then(res => {
    data.filmCommentList = res.data
  })
}
loadFilmCommentList()

// 查询评论电视剧列表
const loadSeriesCommentList = () => {
  request.get('/series/selectByComment/' + data.id).then(res => {
    data.seriesCommentList = res.data
    console.log(data.seriesCommentList)
  })
}
loadSeriesCommentList()

// 跳转至电影详情页
const goFilmDetail = (id) => {
  location.href = '/filmDetail?id=' + id
}

// 跳转至电视剧详情页
const goSeriesDetail = (id) => {
  location.href = '/seriesDetail?id=' + id
}
</script>

<style scoped>
.layout-col {
  width: 20%;
}

.layout-content {
  text-align: center;
  margin-bottom: 10px;
}
</style>